<template>
  <el-dialog
    title="技能"
    :visible.sync="dialogVisible"
    :before-close="handleClose"
    :close-on-click-modal="false"
    width="1100px"
  >
    <div class="link">
      <div class="flexbox" style="width: 50%">
        <el-input v-model="input" placeholder="请输入技能名称" />
        <el-button type="primary" @click="addSkill">确认</el-button>
      </div>
      <ul class="skillList j_b_box">
        <li v-for="(item, index) of form" :key="index" class="j_b_box">
          <i class="el-icon-error delSkill" @click="delSkill(index)" />
          <p>{{ item.skillName }}：</p>
          <el-progress :percentage="item.percentage" :color="customColor" />
          <el-button-group>
            <el-button icon="el-icon-minus" @click="decrease(item)" />
            <el-button icon="el-icon-plus" @click="increase(item)" />
          </el-button-group>
        </li>
      </ul>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleSkill">确 定</el-button>
      <el-button @click="handleClose">取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { updateSkill } from '@/api/resume'
import { Indicator } from 'mint-ui'
export default {
  props: {
    form: {
      type: Array,
      default: () => []
    },
    dialogVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      options: [],
      skillValue: '',
      input: '',
      // 进度条颜色
      customColor: '#409eff'
    }
  },
  methods: {
    // 添加技能
    handleSkill() {
      Indicator.open('正在编辑中，请稍后。。。')
      updateSkill(this.form).then((res) => {
        Indicator.close()
        if (res.code === 200) {
          this.$message.success(res.msg)
        } else {
          this.$message.error(res.msg)
        }
        this.$emit('handlQuery')
      })
    },
    delSkill(index) {
      this.form.splice(index, 1)
    },
    // 技能加减
    increase(item) {
      item.percentage += 10
      if (item.percentage > 100) {
        item.percentage = 100
      }
      this.$forceUpdate()
    },
    decrease(item) {
      item.percentage -= 10
      if (item.percentage < 0) {
        item.percentage = 0
      }
      this.$forceUpdate()
    },
    // 技能添加
    addSkill() {
      if (this.input === '') {
        this.$message.warning('不能为空')
        return
      }
      this.form.push({ skillName: this.input, percentage: 0 })
      this.input = ''
    },
    handleClose() {
      this.input = ''
      this.$emit('handleClose')
    }
  }
}
</script>

<style scoped lang="less">
  .skillList {
    padding: 10px;
    flex-wrap: wrap;
    li {
      width: 50%;
      padding: 10px 0;
      .delSkill {
        cursor: pointer;
        &:hover {
          color: #d4000f;
        }
      }
      p {
        width: 120px;
        padding: 0 10px;
      }
      .el-progress {
        width: 250px;
      }
      .el-button-group {
        width: 150px;
      }
    }
  }
</style>
